<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">有0条考勤审批尚待处理</span>
        <template slot="after">
          <el-button size="small" type="primary">导入</el-button>
          <el-button size="small" type="primary">提醒</el-button>
          <el-button size="small" type="primary">设置</el-button>
          <el-button size="small" type="primary">历史归档</el-button>
          <el-button size="small" type="primary">月份报表</el-button>
        </template>
      </page-tools>
      <el-card>
        <el-row type="flex">
          <el-col :span="2"><strong>部门：</strong></el-col>
          <el-col :span="22">
            <el-checkbox-group v-model="checkedDeptName">
              <el-checkbox
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                class="checkboxName"
                @change="checkedChange"
              />
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2"><strong>考勤状态：</strong></el-col>
          <el-col :span="22">
            <el-radio-group v-model="statusType">
              <el-radio
                v-for="statu in AttenddancesEnum.holidayType"
                :key="statu.id"
                :label="statu.id"
                @change="checkedChange"
              >
                {{ statu.value }}
              </el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="myCardTable">
        <el-table :data="pageList" border style="width: 100%">
          <el-table-column label="序号">
            <template #default="obj">
              {{ obj.$index }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="部门" prop="departmentName" width="110" />
          <el-table-column label="手机" prop="mobile" width="120" />
          <el-table-column
            v-for="(day,index) in dayList"
            :key="day"
            :label="day"
            width="90"
          >
            <template #default="{row}">
              {{ row.attendanceRecord[index].adtStatu | formatStatu }}
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" class="myCardTable">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="filterList.length"
            :page-size="pageSetting.size"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { getAttendancesListMock } from '@/api/attendances'
import AttenddancesEnum from '@/api/constant/attendance'
export default {
  filters: {
    formatStatu(id) {
      if (id === 0) {
        return ''
      }
      const obj = AttenddancesEnum.holidayType.find(item => Number(item.id) === Number(id))
      return obj ? obj.value : '未知'
    }
  },
  data() {
    return {
      // 全部列表数据，要保证bigList不能被改变
      bigList: [],
      // 选中部门列表
      checkedDeptName: [],
      // 选中工作状态
      statusType: '',
      // 部门列表数据
      depts: [],
      // 工作状态列表数据
      AttenddancesEnum,
      // 过滤后的结果
      filterList: [],
      pageSetting: {
        page: 1,
        size: 10
      }
    }
  },
  computed: {
    dayList() {
      if (this.bigList.length === 0) {
        return []
      }
      return this.bigList[0].attendanceRecord.map(item => item.day.toString())
    },
    pageList() {
      const enIndex = this.pageSetting.size * this.pageSetting.page
      const beginIndex = enIndex - this.pageSetting.size
      return this.filterList.slice(beginIndex, enIndex)
    }
  },
  async created() {
    this.bigList = await getAttendancesListMock()
    console.log(this.bigList)
    // 将数据复制一份给filterList
    this.filterList = [...this.bigList]
    const { depts } = await getDepartments()
    this.depts = depts
    console.log(depts)
  },
  methods: {
    // 筛选事件
    checkedChange() {
      // 部门列表的筛选
      let res
      if (this.checkedDeptName.length === 0) {
        res = this.bigList
      } else {
        res = this.bigList.filter(user => {
          const departmentName = user.departmentName
          return this.checkedDeptName.includes(departmentName)
        })
      }
      console.log(res)
      // 工作状态的筛选
      res = res.map(user => {
        return {
          ...user,
          attendanceRecord: user.attendanceRecord.map(item => {
            return {
              ...item,
              // 判断如果为绑定的id为空则证明没有选择单选框，应返回原数据,不然就空白
              adtStatu: this.statusType.length === 0 || Number(this.statusType) === Number(item.adtStatu) ? item.adtStatu : 0
            }
          })
        }
      })
      this.filterList = res
    },
    convertRecord(oldRecord) {
      const res = oldRecord.map(item => {
        return {
          ...item,
          // 判断如果为绑定的id为空则证明没有选择单选框，应返回原数据,不然就空白
          adtStatu: this.statusType.length === 0 || Number(this.statusType) === Number(item.adtStatu) ? item.adtStatu : 0
        }
      })
      return res
    },
    currentChange(newPage) {
      this.pageSetting.page = newPage
    }
  }
}
</script>

<style lang="scss" scoped>
.checkboxName{
  height: 30px;
}
.myCardTable{
  margin-top: 10px;
}
</style>
